<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="../favicon.ico">
    <title>Admin UI</title>
    <style>
      html,body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .main {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      ul,li {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .content {
        width: 800px;
        height: 300px;
        font-size: 16px;
      }

      .message {
        margin-top: 15px;
        text-align: center;
        color: #505050;
      }

      .browser-list {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
      }

      .browser-item {
        width: 160px;
        margin-right: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .browser-item:last-child {
        margin-right: 0;
      }

      .browser-item span {
        width: 100%;
        display: block;
        margin-top: 15px;
        text-align: center;
        color: #808080;
      }

      .browser-item a {
        display: block;
        height: 120px;
        width: 120px;
      }

      .browser-item a img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div class="main">
      <div class="content">
        <ul class="browser-list">
          <li class="browser-item">
            <a href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank">
              <img src="chrome.svg" alt="chrome">
            </a>
            <span>Google Chrome</span>
          </li>
          <li class="browser-item">
            <a href="https://www.microsoft.com/zh-cn/edge" target="_blank">
              <img src="edge.svg" alt="chrome">
            </a>
            <span>Microsoft Edge</span>
          </li>
        </ul>
        <div class="message">您的浏览器不支持运行本应用，请使用Chromium内核浏览器。</div>
      </div>
    </div>
  </body>
</html>
